import routerStore from "@/stores/modules/routerStore";
import { ElCard, ElFooter, ElMain } from "element-plus";
import { KeepAlive, Transition, defineComponent } from "vue";
import { RouterView } from "vue-router";
import { storeToRefs } from "pinia";
import c from "./index.module.scss";
import Footer from "./components/Footer";
import Tabs from "./components/Tabs";

export default defineComponent({
  name: "baseMain",
  setup(_props, _ctx) {
    const { keepAliveList } = storeToRefs(routerStore());
    return () => {
      return (
        <>
          <div class={c.main}>
            {/* 标签页 */}
            <Tabs></Tabs>

            <ElMain class={`${c.mainContent}`}>
              <ElCard class={`${c.mainCard}`}>
                <RouterView
                  v-slot={{
                    default: ({ Component }) => (
                      <Transition appear name="fade-transform" mode="out-in">
                        <KeepAlive include={keepAliveList.value}>
                          <Component></Component>
                        </KeepAlive>
                      </Transition>
                    ),
                  }}
                ></RouterView>
              </ElCard>
            </ElMain>

            {/* <ElFooter class={c.mainFooter}>
              <Footer />
            </ElFooter> */}
          </div>
        </>
      );
    };
  },
});
